<template>
    <div class="enter">
      <Table :columns="tds" :data="table_data"></Table>
      <router-view/>
    </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'enter',
  data () {
    return {
      tds: [
        {
          title: '二维码',
          key: 'qrcode',
          render: (h, params) => {
            return h('img', {
              attrs: {
                src: params.row.qrcode
              },
              style: {
                width: '120px',
                paddingTop: '5px'
              }
            })
          }
        },
        {
          title: '入口名称',
          key: 'name'
        },
        {
          title: '关键字',
          key: 'keyword'
        },
        {
          title: '操作',
          key: 'handle',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.goEdit(params.row.do)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                attrs: {
                  'data-clipboard-text': params.row.url,
                  'class': 'ivu-btn ivu-btn-primary ivu-btn-small copy-url'
                },
                style: {
                  marginRight: '5px'
                }
              }, '复制链接')
            ])
          }
        }
      ],
      table_data: []
    }
  },
  mounted () {
    this.copyUrl()
    this.getEnter()
  },
  methods: {
    /**
     * 获取入口列表
     */
    getEnter () {
      this.$get('enter/getList')
        .then((res) => {
          if (res.data.code === 0) {
            this.table_data = res.data.data
          }
        })
    },
    /**
     * 复制链接
     */
    copyUrl () {
      let Clip = new Clipboard('.copy-url')
      Clip.on('success', (e) => {
        this.$Message.success('复制成功')
        e.clearSelection()
      })
    },
    // Handle
    /**
     * 编辑入口
     */
    goEdit (_do) {
      this.$router.push(
        {
          name: 'enter-edit',
          params: { id: _do }
        }
      )
    }
  }
}
</script>

<style scoped></style>
